<template>
  <div class="shop-notice">
    <div class="shop-notice__title">
      <!-- 1 -->
      <div class="whole_top" v-if="isExpanded">
        <div class="whole_top_one">
          <span>公告内容:</span><el-input class="input_one" v-model="input1" placeholder="请输入 公告内容"></el-input>
        </div>
        <div class="whole_top_two">
          <span>状态:</span><el-select v-model="input2" placeholder="请选择 状态">
            <el-option label="撤销" :value="0"></el-option>
            <el-option label="公布" :value="1"></el-option>
          </el-select>
        </div>
        <div class="whole_top_three">
          <span>是否置顶:</span><el-select v-model="input3" placeholder="请选择 是否置顶">
            <el-option label="否" :value="0"></el-option>
            <el-option label="是" :value="1"></el-option>
          </el-select>
        </div>
        <el-button class="button_one" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button class="button_two" icon="el-icon-delete" @click="clear">清空</el-button>
      </div>
      <!-- 2 -->
      <div class="whole_top_add">
        <el-button class="whole_top_add_one" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
        <div class="whole_top_icon">
          <el-button icon="el-icon-refresh-left" circle @click="shuaxin"></el-button>
          <el-button icon="el-icon-search" circle @click="fangda"></el-button>
        </div>
      </div>
      <!-- 3 -->
      <div class="whole_table">
        <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'id', order: 'descending' }" row-key="id"
          border borderdefault-expand-all>
          <el-table-column prop="" label="序号" width="50" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="公告内容" width="310" align="center">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="310" align="center">
            <template slot-scope="scope">
              <el-tag type="primary">
                {{ scope.row.status === 1 ? "公布" : "撤销" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="isTop" label="是否置顶" width="310" align="center">
            <template slot-scope="scope">
              <el-tag type="primary">
                {{ scope.row.isTop === 1 ? "是" : "否" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="modify(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="deletes(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paging">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage4" :page-sizes="[10, 20, 30, 40, 50]" :page-size="size"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
      <!-- 文本框 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="公告标题" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <template>
              <el-radio v-model="form.status" :label="1">公布</el-radio>
              <el-radio v-model="form.status" :label="2">撤销</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="置顶" :label-width="formLabelWidth">
            <template>
              <el-radio v-model="form.isTop" :label="1">是</el-radio>
              <el-radio v-model="form.isTop" :label="2">否</el-radio>
            </template>
          </el-form-item>
          <el-button type="primary" class="Upload"  @click="openFileUpload">点击上传图片</el-button>
          <input type="file" id="fileUpload" style="display:none;" @change="handleFileUpload" />
          <el-form-item label="公告内容" :label-width="formLabelWidth">
          <tinymce-editor ref="editor" v-model="form.content"  @onClick="onClick">
          </tinymce-editor>
        </el-form-item>
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="queding">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Token from "../../../api/headers";
import TinymceEditor from "@/components/tinymce-editor/tinymce-editor";
export default {
  data() {
    return {
      // noticeList: [],
      input1: "",
      input2: "",
      input3: "",
      form: {}, // 富文本数据
      tableData: [],
      currentPage4: 1,
      total: null,
      size: 10, // 每页显示条数，初始化为 10
      page: 1, // 初始化当前页码为 1
      // 文本框
      gridData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogTitle: "", // 对话框标题
      // disabled:'',
      form: {
        title: "",
        status: "",
        t: Date.now(),
        isTop: "",
        sic:'',
        content:'ewweewewwe'
      },
      formLabelWidth: "120px",
      //
      
      isExpanded: true, // 控制搜索栏的显示和隐藏
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 点击上传图片
    openFileUpload() {
      document.getElementById('fileUpload').click();
    },
    // 点击上传图片
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const imgElement = document.createElement('img');
          imgElement.src = e.target.result;
          imgElement.style.maxWidth = '100%';
          imgElement.style.maxHeight = '300px';
          const editor = this.$refs.editor;
          editor.insertContent(imgElement.outerHTML); // 将图片插入到富文本编辑器中
        };
        reader.readAsDataURL(file);
      }
    },
    // 富文本
    onClick() {
      console.log("点击了");
    },
    // 获取数据
    getList() {
      axios
        .get("http://47.104.167.34:9305/apis/shop/notice/page", {
          params: {
            current: this.page,
            size: this.size,
            t: Date.now(),
          },
          ...Token,
        })
        .then((res) => {
          // this.data = response.data
          // this.error = null
          console.log(res, "表单数据");
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        })
        .catch((error) => {
          this.error = error.message;
          this.data = null;
        });
    },
    // 分页
    handleSizeChange(val) {
      this.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    // 搜索
    search() {
      console.log("search");
      axios
        .get("http://47.104.167.34:9305/apis/shop/notice/page", {
          params: {
            current: this.page,
            size: this.size,
            t: Date.now(),
            title: this.input1,
            status: this.input2,
            isTop: this.input3,
          },
          ...Token,
        })
        .then((res) => {
          // this.data = response.data
          // this.error = null
          console.log(res, "搜索数据");
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        })
        .catch((error) => {
          this.error = error.message;
          this.data = null;
        });
    },
    // 清空
    clear() {
      this.input1 = "";
      this.input2 = "";
      this.input3 = "";
      this.getList();
    },
    // 新增
    add() {
      this.form={};
      this.dialogFormVisible = true;
      this.dialogTitle = "新增";
    },
    // 修改
    modify(row) {
      this.dialogFormVisible = true;
      this.dialogTitle = "修改";
      axios
        .get("http://47.104.167.34:9305/apis/shop/notice/info/" + row.id, {
          params: {
            t: Date.now(),
          },
          ...Token,
        })
        .then((res) => {
          // this.data = response.data
          // this.error = null
          console.log(res, "修改数据");
         this.form=res.data.data

        })
        .catch((error) => {
          this.error = error.message;
          this.data = null;
        });
    },
    // 确定
    queding() {
      if (this.dialogTitle === "新增") {
        axios
          .post("http://47.104.167.34:9305/apis/shop/notice",
              this.form,
              Token,
          )
          .then((res) => {
            console.log(res,'新增');
            this.$message({
              type: "success",
              message: "新增成功!",
            });
            this.getList();
            this.dialogFormVisible = false;
          })
          .catch((error) => {
            this.$message({
              type: "error",
              message: "新增失败",
            });
          });
      } else if (this.dialogTitle === "修改") {
        axios
          .put("http://47.104.167.34:9305/apis/shop/notice",   
            this.form,
            Token,
          )
          .then((res) => {
            console.log(res, "修改");
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.getList();
            this.dialogFormVisible = false;
          })
          .catch((error) => {
            this.$message({
              type: "error",
              message: "修改失败",
            });
          });
      }
    },
    // 刷新
    shuaxin() {
      this.getList();
    },
    // 放大
    fangda() {
      this.isExpanded = !this.isExpanded; // 切换搜索栏的显示和隐藏
    },
    // 删除
    deletes(row) {
      console.log("deletes的row", row);
      axios
        .delete("http://47.104.167.34:9305/apis/shop/notice/" + row.id, {
          data: {
            t: Date.now(),
          },
          ...Token,
        })
        .then((res) => {
          console.log(res, "删除");
          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        });
    },
  },
  components: {
    TinymceEditor,
  },
};
</script>

<style lang="scss" scoped>
.shop-notice {
  // height: 82vh;
  margin: 20px;
  box-shadow: 0 0 10px #bebebe;
}

.shop-notice__title {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
}

.whole_top {
  width: 100%;
  margin: 0 auto;
  display: flex;
}

.whole_top span {
  height: 28px;
  line-height: 28px;
  text-align: center;
  display: inline-block;
  color: #606266;
  font-size: 14px;
  margin-right: 10px;
}

.input_one,
.input_two {
  height: 28px;
  width: 200px;
}

.whole_top_one {
  margin-left: 10px;
}

.whole_top_two {
  margin-left: 20px;
}

.whole_top_three {
  margin-left: 20px;
}

.button_one {
  width: 100px;
  margin-left: 80px;
}

.button_two {
  width: 100px;
  margin-left: 20px;
}

// 新增
.whole_top_add {
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 10px;

  .whole_top_icon {
    display: flex;
    align-items: center;
  }
}

// 分页
.paging {
  float: right;
  margin-top: 20px;
}
.Upload{
  position: relative;
  top: 37px;
  left: 81%;
  z-index: 2;
}

</style>